<template>
	<view class="bg">
		<image src="/pagesA/static/login_bg.png" style="height: 100%;width: 100%;" mode=""></image>
		<image class="change" :style="{top:vuex_sys.menuTop+100+'px'}" src="/pagesA/static/change.png" style="height: 178rpx;width: 427rpx;" mode=""></image>
	</view>
	<view class="title"  :style="{top:vuex_sys.menuTop+5+'px',height:vuex_sys.menuHeight+'px'}">
		<wd-icon @click="back" name="thin-arrow-left" size="20px" color="#ffffff" />
	</view>
	<view class="login-conter">
		<view class="tag">
			<text>登录</text>
		 </view>
		 <view class="input_box">
			 <wd-input v-model="value" no-border type="number" :maxlength="11" placeholder="手机号" placeholderStyle="color:#fff" custom-class="inputClass" suffix-icon="mail" />
		 </view>
		 <view class="input_box">
		 	 <wd-input v-model="value2"  no-border type="number" :maxlength="6" placeholder="验证码" placeholderStyle="color:#fff" custom-class="inputClass">
				<template #suffix>
					<text 
						class="yzm" 
						:class="{ 'yzm-disabled': isCountingDown || !isPhoneValid }"
						@click="getCode"
					>
						{{ codeButtonText }}
					</text>
				</template> 
			 </wd-input> 
		 </view>
		<view class="change2">
			<wd-checkbox v-model="checkboxValue"  checked-color="#20411C">
				<view class="change_text">点击同意  <span class="span" @click.stop="toWeb(1)">change平台用户协议 </span> 与  <span class="span" @click.stop="toWeb(2)">隐私政策</span></view>
			</wd-checkbox>
		</view>
		<view class="change">
			<wd-button custom-class="custom-shadow" :disabled="disabled" @click="getlogin">登录</wd-button>
		</view>
	</view>
</template>
<script setup>
    import {useUserStore} from '@/store/user';
	const userStore = useUserStore();
	const vuex_sys = userStore.vuex_sys;
	const phoneCode = ref(null)
	const openId = ref(null)
	const checkboxValue = ref(false)
	const value = ref(null)
	const value2 = ref(null)
	
	// 验证码相关状态
	const isCountingDown = ref(false) // 是否正在倒计时
	const countdown = ref(59) // 倒计时秒数
	let countdownTimer = null // 倒计时定时器

	onLoad((opt) => {
		openId.value = opt.openId || null;
	});
	
	// 清理定时器
	onUnmounted(() => {
		if (countdownTimer) {
			clearInterval(countdownTimer)
		}
	})
	
	// 校验手机号是否有效（11位数字）
	const isPhoneValid = computed(() => {
		return value.value && /^1[3-9]\d{9}$/.test(value.value)
	})
	
	// 获取验证码按钮文本
	const codeButtonText = computed(() => {
		if (isCountingDown.value) {
			return `${countdown.value}s后重新获取`
		}
		return '获取验证码'
	})
	
	// disabled是否可以点击登录
	const disabled = computed(() => {
		return!value.value ||!value2.value ||!checkboxValue.value
	})
	
	
	// 返回
	const back = () => {
		uni.navigateBack();
	}
	
	// 外链
	const toWeb = (num) => {
		if(num == 1){
			uni.navigateTo({
				url: '/pagesA/view/rich/index?title=隐私条款&url=https://api-v3.changepro.vip/vip-privacy-policy.html'
			})
			}else{
			uni.navigateTo({
				url: '/pagesA/view/rich/index?title=服务协议&url=https://api-v3.changepro.vip/user-agreement.html'
			})
		}
	}
	
	// 开始倒计时
	const startCountdown = () => {
		isCountingDown.value = true
		countdown.value = 59
		countdownTimer = setInterval(() => {
			countdown.value--
			if (countdown.value <= 0) {
				clearInterval(countdownTimer)
				isCountingDown.value = false
				countdown.value = 59
			}
		}, 1000)
	}
	
	// 点击获取验证码
	const getCode = async () => {
		// 如果正在倒计时或手机号无效，直接返回
		if (isCountingDown.value || !isPhoneValid.value) {
			if (!isPhoneValid.value) {
				uni.showToast({
					title: '请输入正确的11位手机号',
					icon: 'none',
					duration: 2000
				})
			}
			return
		}
		
		try {
			// 显示加载状态
			uni.showLoading({
				title: '发送中...'
			})
			// 调用发送验证码API
			const res = await uni.api.sendSmsCode({
				countryCode:'86',
			    telephone: value.value
			})
			uni.hideLoading()
			// 检查API返回结果
			if (res.code === 0) {
				uni.showToast({
					title: '验证码已发送',
					icon: 'success',
					duration: 2000
				})
				// 开始倒计时
				startCountdown()
			} else {
				uni.showToast({
					title: res.message || '发送失败，请重试',
					icon: 'none',
					duration: 2000
				})
			}
			
		} catch (error) {
			uni.hideLoading()
			console.error('发送验证码失败:', error)
			uni.showToast({
				title: error.message || '网络错误，请重试',
				icon: 'none',
				duration: 2000
			})
		}
	}
	
	const getlogin = async (code) => {
		const res = await uni.api.login({
			loginType:'cd',
			countryCode:'86',
			openId:openId.value,
			code:value2.value,
			telephone:value.value,
		});
		if(res.data.authenticationToken){
			userStore.login(res.data.authenticationToken,res.data);
			uni.switchTab({
				url: '/pages/index/index',
				success: e => {
					uni.showToast({
						title: '登录成功',
						icon: 'none',
					});
				   var page = getCurrentPages().pop();// 返回页面数组的最后一个页面数据
				   page.onLoad();
				}
			})
		}
	};
</script>
<style lang="scss">
	.bg {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: -1;
		.change{
			position: fixed;
			z-index: 10;
			top: 200rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
	.title{
		position: fixed;
		z-index: 10;
		padding-left: 40rpx;
	}
	.login-conter{
		position: fixed;
		z-index: 10;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1000rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.tag{
			font-family: PingFangSC, PingFang SC;
			font-size: 42rpx;
			color: #FFFFFF;
			margin-bottom: 58rpx;
		}
		.input_box{
			margin: 8rpx 0;
			.yzm{
				font-size: 22rpx;
				color: #FFFFFF;
				cursor: pointer;
				transition: opacity 0.3s ease;
			}
			.yzm-disabled{
				opacity: 0.5;
				cursor: not-allowed;
			}
		}
		:deep(.custom-shadow) {
			margin-top: 38rpx;
			width: 610rpx;
			height: 90rpx !important;
			background: #1f1c1c !important;
			border-radius: 12rpx 12rpx 12rpx 12rpx !important;
	    }
		:deep(.inputClass) {
			width: 610rpx;
			padding:20rpx 20rpx;
			background: rgba(0, 0, 0, 0.3) !important;
			color: #FFFFFF !important;
			border-radius: 12rpx !important;
		}
		:deep(.wd-input__inner) {
			color: #FFFFFF !important;
		}
		:deep(.wd-input__icon) {
			background: none !important;
		}
		.change{
			display: flex;
			position: absolute;
			bottom: 40rpx;
			.change_text{
				font-size: 20rpx;
				color: #FFFFFF;
			}
		}
	}
	.change2{
		margin-top: 20rpx;
		.change_text{
			font-size: 20rpx;
			color: #FFFFFF;
		}
	}
	.span{
		text-decoration: underline !important;
	}
</style>